<!--
 * 空状态组件
-->
<template>
    <page-layout class="page-layout">
        <!-- 基础使用 -->
        <app-demo-module title="基础使用">
            <pure-empty class="empty"></pure-empty>
        </app-demo-module>

        <!-- 额外内容 -->
        <app-demo-module title="额外内容" desc="通过默认 slot 传入内容">
            <pure-empty class="empty">
                <view class="buttons">
                    <pure-button text="回到首页" theme="primary"></pure-button>
                    <pure-button text="继续逛逛" theme="danger"></pure-button>
                </view>
            </pure-empty>
        </app-demo-module>
    </page-layout>
</template>

<script setup>
    import { ref, computed } from "vue";
</script>

<style scoped lang="scss">
    .empty {
        background: #f8f8f8;
    }

    .buttons {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }
</style>
